<template>
  <div style="height: 568px">
    <Table :columns="columns" :data="tableData" stripe></Table>
    <div
      class="flex-row-end-center"
      style="margin-top: 10px"
      v-if="kqInfoList.length > 5"
    >
      <Page
        :total="kqInfoList.length"
        :page-size="pageSize"
        show-total
        @on-change="changepage"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        // { title: "井组编号", key: "jz_id" },
        { title: "井组名称", key: "jz_name" },
        { title: "检测点个数", key: "jcd_num" },
        { title: "井口坐标", key: "jk_point" },
        { title: "数据最后更新时间", key: "update_time" },
        { title: "运行状态", key: "kq_state" },
      ],
      tableData: [],
      pageSize: 10,
    };
  },
  props: {
    kqInfoList: Array,
  },
  watch: {
    kqInfoList(val) {
      this.tableData = val.slice(0, this.pageSize);
    },
  },
  methods: {
    changepage(index) {
      let _start = (index - 1) * this.pageSize;
      let _end = index * this.pageSize;
      this.tableData = this.kqInfoList.slice(_start, _end);
    },
  },
};
</script>
<style scoped>
</style>